<template>
	<div style="width: 100%; height: 100vh">
		<vue-waterfall-easy
			ref="waterfall"
			:imgsArr="imgList"
			@scrollReachBottom="getData"
      srcKey="url"
		>
		</vue-waterfall-easy>
	</div>
</template>

<script>
import vueWaterfallEasy from 'vue-waterfall-easy';
import axios from 'axios';
export default {
	data() {
		return {
			imgList: [],
			page: 0,
		};
	},
	components: {
		vueWaterfallEasy,
	},
	methods: {
		getData() {
			this.page++;
			axios({
				method: 'get',
				url: 'http://127.0.0.1/api/getViewImage',
				params: {
					page: this.page,
					size: 20,
				},
			}).then((res) => {
				if (res.data.status === 1) {
          res.data.queryData.forEach(item => {
            item.url = `${this.$baseUrl}${item.url}`
          })
					this.imgList = [...this.imgList ,...res.data.queryData.results]
          console.log(this.imgList)
				}
			});
		},
	},
	created() {
		this.getData();
	},
};
</script>

<style lang="less" scoped>
.waterfall {
	height: 800px;
}

.info {
	text-align: center;
}
</style>
